<template>
  <el-card>
    <el-row class="custom-row">
      <el-col :span="5">
        <el-input placeholder="请输入要搜索的订单编号" clearable></el-input>
      </el-col>
      <el-col :span="2.5">
        <el-button type="primary" @click="">按订单编号搜索</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="dialogVisible = true">添加订单</el-button>
      </el-col>

    </el-row>

    <el-table :data="tableData" style="width: 100%" height="600">
      <el-table-column prop="outWareId" label="出库订单编号" width="150" />
      <el-table-column fixed prop="wareId" label="仓库编号" width="150" />
      <el-table-column prop="outWareNum" label="出库数量" width="150" />
      <el-table-column prop="outWareTon" label="出库吨数" width="150" />
      <el-table-column prop="outWareMoney" label="存储费" width="150" />
      <el-table-column prop="outWareOrder" label="入库订单单号" width="150" />
      <el-table-column prop="outWareDate" label="入库订单日期" />
      <el-table-column label="操作" width="250">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
    
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="订单信息" v-model="dialogVisible" width="30%">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="订单编号">
          <el-input v-model="editForm.outWareOrder"></el-input>
        </el-form-item>
        <el-form-item label="出库日期">
          <el-input v-model="editForm.outWareDate"></el-input>
        </el-form-item>
        <el-form-item label="存储费">
          <el-input v-model="editForm.outWareMoney"></el-input>
        </el-form-item>
        <el-form-item label="出库吨数">
          <el-input v-model="editForm.outWareTon"></el-input>
        </el-form-item>
        <el-form-item label="出库数量">
          <el-input v-model="editForm.outWareNum"></el-input>
        </el-form-item>
        <el-form-item label="仓库号">
          <el-input v-model="editForm.wareId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">确定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script setup>

import { ref } from 'vue';
import axios from '~/api/request.js';

const tableData = ref([]);

//显示数据
const loadData = async () => {
      try {
        const res = await axios.get("/api/out/selectAllOrder");
        console.log(res.data);
        tableData.value = res.data.data;
      } catch (error) {
        console.error("Error loading data:", error);
      }
    };
import { onMounted } from 'vue';
onMounted(loadData);

//逻辑删除

const handleDelete = async (row) => {
  try {
    const response = await axios.post(`/api/out/delete/${row.outWareId}`);
    if (response.status === 200) {
      const index = tableData.value.findIndex(item => item.outWareId === row.outWareId);
      if (index !== -1) {
        tableData.value.splice(index, 1); 
      }
    } else {
      console.error('删除订单失败');
    }
  } catch (error) {
    console.error('删除订单失败', error);
  }
};

//新增
const dialogVisible = ref(false);
const handleAdd = async () => {
  try {
    const endpoint = '/api/out/add';
    const response = await axios.post(endpoint, editForm.value);
    if (response.status === 200) {
      dialogVisible.value = false;
      editForm.value = {
        outWareOrder: '',
        outWareDate: '',
        outWareTon: '',
        wareId: '',
        outWareNum: '',
        outWareMoney:''
    
      };
      loadData();
    } else {
      console.error('操作失败');
    }
  } catch (error) {
    console.error('操作失败', error);
  }
};

const editForm = ref({
  outWareId:'',
  outWareOrder: '',
  outWareDate: '',
  outWareTon: '',
  wareId: '',
  outWareNum: '',
  outWareMoney:''
  
}); 






</script>



<style>
.distance {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.custom-row {
  margin-left: -10px;
  /* 负 margin 补偿列之间的间隙 */
  margin-right: -10px;
}

.custom-row .el-col {
  padding-left: 10px;
  /* 调整列的 padding */
  padding-right: 10px;
}
</style>